<template>
    <div class="mform">
        <div class="back">
            <Back>
                <div class="form-btn">
                    <el-button type="primary" @click="save()">保存</el-button>
                </div>
            </Back>
        </div>
        <div class="form-content">
            <div class="form-box" style="width: 60%;">
                <el-form ref="formRef" :model="form" :rules="rules" :label-position="'left'" label-width="auto">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="form.name" placeholder="请输入名称" clearable />
                    </el-form-item>
                    <el-form-item label="状态" prop="state">
                        <el-radio-group v-model="form.state">
                            <el-radio value="1" border>启用</el-radio>
                            <el-radio value="2" border>禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="起止时间" prop="time" required>
                        <el-date-picker v-model="form.time" type="datetimerange" range-separator="至"
                            start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss"
                            @change="getTable" />
                    </el-form-item>
                    <el-form-item label="关联券" prop="active_coupon" required>
                        <el-select-v2 v-model="form.active_coupon" filterable :options="storeCouponOptions"
                            placeholder="请选择" multiple  />
                    </el-form-item>

                </el-form>
            </div>
        </div>
    </div>
</template>
<script setup name="CouponLinkDetail">
const { proxy } = getCurrentInstance()

const formRef = ref();
const form = reactive({ id: '', name: '', state: '1', time: [], active_coupon: [] });
//验证规则
const rules = {
    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
    state: [{ required: true, message: '请选择状态', trigger: 'blur' }],
    time: [{ required: true, message: '请选择开始结束时间', trigger: 'blur' }],
    active_coupon: [{ required: true, message: '请关联券', trigger: 'blur' }],
};
//保存
async function save() {
    formRef.value.validate(async (valid) => {
        if (valid) {
            let res = await proxy.$post('ActiveCouponLinkSave', form)
            if (res.code === 0) {
                ElMessage({ type: 'success', message: '保存成功' });
                proxy.$bus.emit('back');
            }
        }
    });
}

onMounted(() => {
    getOptions()
    // 编辑
    let id = proxy.$route.query.id || null;
    if (id) {
        getDetail(id)
    }
});

async function getDetail(id) {
    let res = await proxy.$post('ActiveCouponLinkDetail', {
        id
    }, false)
    if (res.code === 0) {
        Object.assign(form, res.data);
    }
}

// 门店券列表
const storeCouponOptions = ref([])
async function getOptions() {
    let res = await proxy.$post('OptionsList', { keys: ['couponOptions'] }, false)
    if (res.code === 0) {
        storeCouponOptions.value = res.data.couponOptions || []
    }
}

</script>
<style scoped lang="scss">
.bitem {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .avatar-uploader,
    .el-icon.avatar-uploader-icon {
        width: 100px;
        height: 60px;
    }

    .avatar-uploader .avatar {
        width: 100px;
        height: 60px;
    }
}
</style>